<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>名单排序</title>
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
		<script type="text/javascript" src="https://cdn.staticfile.org/xlsx/0.15.1/xlsx.core.min.js"></script>
	</head>

	<body>
		<div class="nav">
			<!-- webkitdirectory directory multiple -->
			<div id="btn-con1">
				<input type="file" id="excel" webkitdirectory>
			</div>
			<div id="btn-con2">
				<div id="btn1" class="button-div btn-color-dodgerblue">重新渲染</div>
				<div id="btn2" class="button-div btn-color">开始排序</div>
				<div id="btn3" class="button-div btn-color-wheat">随机提问</div>
			</div>
		</div>
		<ul id="ul">
			<!--<li>
				<a href="#">
					<h2>序号 1</h2>
					<p>天伦店</p>
					<p>周杰伦</p>
				</a>
			</li>-->
		</ul>
	</body>
	<script src="js/fileselection.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var xlsxArr = null;//文件数组
		var sortingArr = sessionStorage.getItem("sortingArr");//排序数组
		var htmlShowTime = 100;//重新排序时间（毫秒）
		var cxpxTime = 1000;//重新排序时间（毫秒）
		var returnBol = false;//阻止清空后执行
		
		htmlShow();//已排序刷新直接显示
		btnShowHide(); //是否显示文件选择按钮

		function htmlShow() {//已排序刷新直接显示
			if(sortingArr) {
				bol = true;
				$("#btn2").text('重新排序');
				var asd = JSON.parse(sortingArr); //JSON转数组
				for(var i = 0; i < asd.length; i++) {
					appendFun(asd[i], (i + 1), i * htmlShowTime, asd);
				};
			};
		};
		
		function btnShowHide() {
			xlsxArr = sessionStorage.getItem("xlsxArr");
			if(!xlsxArr) {
				$("#btn-con1").show();
				$("#btn-con2").hide();
			} else {
				$("#btn-con1").hide();
				$("#btn-con2").show();
			};
		};

		$("#btn1").click(function() { //重新渲染按钮
			$("#ul").html("");
			returnBol = true;//阻止清空后执行
			sessionStorage.removeItem("xlsxArr"); //删除
			sessionStorage.removeItem("sortingArr"); //删除
			btnShowHide(); //是否显示文件选择按钮
		});
		
		var bol = false;
		$("#btn2").click(function() { //开始排序按钮
			if(bol) {
				return
			};
			$("#btn2").text('正在排序');
			bol = true;
			$("#ul").html("");
			var qwe = JSON.parse(xlsxArr); //JSON转数组
			var arr = randomSort(qwe);
			//			console.log(arr.length);
			for(var i = 0; i < arr.length; i++) {
				appendFun(arr[i], (i + 1), i * cxpxTime, arr);
			};
		});

		function appendFun(obj, num, times, arr) {
			setTimeout(() => {
				console.log(returnBol,'returnBol')
				if(returnBol){
					return
				}
				var htmlChi = `
				<li>
					<a href="#">
						<h2>序号 ${num}</h2>
						<p>${obj.department}</p>
						<p>${obj.name}</p>
					</a>
				</li>
				`
				$("#ul").append(htmlChi);
				if(arr.length == num) {
					bol = false; //防止按钮重复操作
					$("#btn2").text('重新排序');
					sortingArr = sessionStorage.getItem("sortingArr");
					if(sortingArr) {
						sessionStorage.removeItem("sortingArr"); //删除
					};
					sessionStorage.setItem("sortingArr", JSON.stringify(arr)); //临时存储
				};
			}, times)
		};
		
		function randomSort(a) { //数组排序
			var arr = a,
				random = [],
				len = arr.length;
			for(var i = 0; i < len; i++) {
				var index = Math.floor(Math.random() * (len - i));
				random.push(a[index]);
				arr.splice(index, 1);
			};
			return random;
		};
		
		$("#btn3").click(function() { //重新渲染按钮
			sortingArr = sessionStorage.getItem("sortingArr");
			if(!sortingArr){
				alert('请先排序后操作')
				return
			}
			var numb = 1;
			var maxNum =JSON.parse(sortingArr); //JSON转数组
			var zzz = setInterval(() => {
				numb = Math.round(Math.random() * maxNum.length);
				$("a").removeClass('this_a');
				$("a").eq(numb).addClass('this_a');
				$("a").eq(numb).focus();
			}, 200)
			setTimeout(() => {
				clearInterval(zzz);
			}, 5000)
		});
	</script>

</html>